<script lang="ts" setup>
import { DepositType, RentTimeType, VoltageType } from '@/types/enum'
import { FormInstance } from 'element-plus'
import { ref, reactive, onMounted, defineAsyncComponent } from 'vue'
import { getProduct, queryBikeProduct } from '@/api/term'
import { queryBikeProductTableCol } from '@/api/term/types/term'
import { findStoreByName } from '@/api/store'
import { getToken } from '@/utils/cache/cookies'
import GoButton from '@/components/basic/GoButton.vue'
import { useRouter } from 'vue-router'
import LongRentTermTable from '@/components/table/LongRentTermTable.vue'
import { useTable } from '@/hooks/useTable'
defineOptions({
  name: 'BikeLongTermList'
})
interface Form {
  storeName: string
  productName: string
  bikeModel: string
  voltage: VoltageType | ''
  depositType: DepositType | ''
  rentTime: RentTimeType | ''
  storeId: string | number
}
const form = reactive<Form>({
  storeName: '',
  productName: '',
  bikeModel: '',
  voltage: '',
  depositType: '',
  rentTime: '',
  storeId: ''
})
const formRef = ref<FormInstance | null>(null)

const querySearch = (queryString: string, cb: Function) => {
  if (queryString) {
    findStoreByName({
      token: getToken() ?? '',
      storeName: queryString
    }).then((res) => {
      if (res.statusCode === '0') {
        res.data = res.data.map((item) => {
          return {
            ...item,
            value: item.storeName
          }
        })
        cb(res.data)
      }
    })
  }
}
const bikeModelOptions = ref([{ label: '不限', value: '' }])
const termNameOptions = ref([{ label: '不限', value: '' }])
const handleSelect = (item: Record<string, any>) => {
  form.storeName = item.storeName
  form.storeId = item.storeId
  getProduct({
    storeId: form.storeId as string,
    token: getToken() ?? '',
    name: form.storeName
  }).then((res) => {
    if (res.statusCode === '0') {
      bikeModelOptions.value = res.data.model
      termNameOptions.value = res.data.name
      form.productName = termNameOptions.value[1].value
    }
  })
}
const { data, pagination, loading, setCurrentPage, load, handleCurrentChange, handleSizeChange } =
  useTable<queryBikeProductTableCol>(queryBikeProduct, getToken() ?? '', () => form)
onMounted(() => {
  load()
})
const submit = () => {
  setCurrentPage(1)
  load()
}
const reset = () => {
  formRef.value?.resetFields()
  form.storeId = ''
  termNameOptions.value = [{ label: '不限', value: '' }]
  bikeModelOptions.value = [{ label: '不限', value: '' }]
}

const router = useRouter()
const searchMap = () => {
  router.push({
    name: 'BikeTermAMap'
  })
}
/**
 * 查看更多信息
 */
const BikeRentTermInfoDialog = defineAsyncComponent(
  () => import('@/components/dialog/BikeRentTermInfo.vue')
)
const BikeRentTermInfoDialogRef = ref<InstanceType<typeof BikeRentTermInfoDialog> | null>(null)
const handleShowMoreInfo = async (row: queryBikeProductTableCol) => {
  BikeRentTermInfoDialogRef.value?.setData(row.storeId.toString(), row.name)
  BikeRentTermInfoDialogRef.value?.open()
}
</script>

<template>
  <div class="xy-container">
    <el-form inline ref="formRef" :model="form">
      <el-form-item prop="storeName" label="门店名称">
        <el-autocomplete
          v-model="form.storeName"
          :fetch-suggestions="querySearch"
          @select="handleSelect"
          placeholder="请输入门店名称"
          clearable
          :highlight-first-item="true"
          :fit-input-width="true"
          style="width: 220px"
          popper-class="store-name-autocomplete"
        >
          <template #default="{ item }">
            <span class="name">{{ item.value }}</span>
            <span class="addr">{{ item.address }}</span>
          </template>
        </el-autocomplete>
      </el-form-item>
      <el-form-item prop="productName" label="套餐名称">
        <el-select v-model="form.productName" placeholder="请选择" style="width: 220px">
          <el-option
            v-for="(item, index) in termNameOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="bikeModel" label="车辆型号">
        <el-select v-model="form.bikeModel" placeholder="请选择" style="width: 220px">
          <el-option
            v-for="(item, index) in bikeModelOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">查询</el-button>
        <el-button plain @click="reset">重置</el-button>
      </el-form-item>
      <el-form-item float-right>
        <go-button icon-name="search" @click="searchMap" class="fill-red">
          <template #text><span>通过地图查询</span></template>
        </go-button>
      </el-form-item>
    </el-form>
    <long-rent-term-table
      :data="data"
      page="bikelongtermlist"
      @show="handleShowMoreInfo"
      :loading="loading"
    />
    <bike-rent-term-info-dialog ref="BikeRentTermInfoDialogRef" />
    <div flex justify-end mt-20>
      <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        v-model:current-page="pagination.pageNum"
        v-model:page-size="pagination.pageSize"
        background
        :total="pagination.total"
        layout="total,prev,pager,next,jumper,sizes"
      />
    </div>
  </div>
</template>

<style scoped></style>
